<template>
<div :class="[$style.container]">
  <div :class="[$style.body]">
    <ul :class="[$style.groupList]" v-infinite-scroll="onLoad" :infinite-scroll-disabled="disabled">
      <li :class="[$style.groupItem]" v-for="(row, k)  in pageData.rows" :key="k">
        <div :class="[$style.groupContent]">
          <div :class="[$style.avatar]">
            <color-avatar :size="28" :text="row.commentByName" initial></color-avatar>
          </div>
          <div :class="[$style.content]">
            <div :class="[$style.title]">{{row.commentByName}}</div>
            <div :class="[$style.textContent]">{{row.content}}</div>
            <div :class="[$style.description]">
              <span>{{row.commentTime}}</span>
              <el-button type="text" size="mini" class="ml-2" @click="onReplyComment(row)" v-if="canReplyComment(row)"><span class="text-regular">回复</span></el-button>
              <el-button type="text" size="mini" class="ml-2" @click="onDelComment(row, k)"  v-if="canDelComment(row)"><span class="text-error">删除</span></el-button>
            </div>
          </div>
        </div>
        <div :class="[$style.listWrap]" v-if="row.replyDTOS && row.replyDTOS.length > 0">
          <ul :class="[$style.list]">
            <li :class="[$style.item]" v-for="(item, i)  in row.replyDTOS.slice(0, row._expand ? undefined : 2)" :key="item.id">
              <div>
                <span>
                  <span :class="[$style.limitText]" :title="item.replyByName">{{item.replyByName}}</span>
                  <span v-if="item.repliedByName">
                    <span> 回复 </span>
                    <span :class="[$style.limitText]" :title="item.repliedByName">{{item.repliedByName}}</span>
                  </span>
                  <span> : </span>
                </span>
                <span class="text-secondary">{{item.content}}</span>
              </div>
              <div :class="[$style.description]">
                <span>{{item.replyTime}}</span>
                <el-button type="text" size="mini" class="ml-2" @click="onReplyReply(row, item)" v-if="canReplyReply(item)"><span class="text-regular">回复</span></el-button>
                <el-button type="text" size="mini" class="ml-2" @click="onDelReply(row, item, i)" v-if="canDelReply(item)"><span class="text-error">删除</span></el-button>
              </div>
            </li>
          </ul>
          <div class="text-right" v-if="row.replyDTOS.length > 2">
            <el-button type="text" size="mini" @click="row._expand = true" v-if="!row._expand">查看{{row.replyDTOS.length}}条回复</el-button>
            <el-button type="text" size="mini" @click="row._expand = false" v-else>收起更多</el-button>
          </div>
        </div>
      </li>
    </ul>
    <empty-data v-if="!pageData.loading && pageData.rows.length < 1">暂无评论信息</empty-data>
    <div class="text-center my-2 text-secondary">
      <span v-if="pageData.loading">加载中...</span>
      <span v-if="!pageData.hasMore && !pageData.loading && pageData.rows.length > 0">没有更多了</span>
    </div>
  </div>
  <div :class="[$style.footer]">
    <message-input :send-fn="sendFn" ref="messageInput"></message-input>
  </div>
</div>
</template>

<script lang="ts">

import { queryDynamicsByDoc } from '@/api/dir-dynamic'
import { PageData, PageQueryParams } from '@/config/page'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import MessageInput from './message-input/index.vue'
import { createComment, createReply, deleteComment, deleteReply, queryCommentsByDoc } from '@/api/doc-comment'

// const comments = [
//   {
//     commentByName: '张三',
//     commentBy: 1,
//     commentTime: '2020/01/09 12:09:00',
//     content: 'hello world',
//     replyDTOS: [
//       {
//         replyByName: '李四',
//         replyTime: '2020/03/09 04:08:23',
//         content: '你好'
//       },
//       {
//         replyByName: '李四213',
//         repliedByName: 'Alison',
//         replyTime: '2020/03/09 04:08:23',
//         content: 'How are you!!!'
//       },
//       {
//         replyByName: '李四213dqwedhqwjdqpfj复合物',
//         repliedByName: 'Alison化肥发黑我发和吴丰',
//         replyTime: '2020/03/09 04:08:23',
//         content: '分为非金额为附件嗯颇为附件嗯吴丰吴丰金额为见附件二维附件未of就方法'
//       },
//       {
//         replyByName: '李四213',
//         repliedByName: 'Alison',
//         replyTime: '2020/03/09 04:08:23',
//         content: 'How are you!!!'
//       }
//     ]
//   },
//   {
//     commentByName: 'zhangyinag',
//     commentBy: 1,
//     commentTime: '2020/01/09 12:09:00',
//     content: '指定电话',
//     replyDTOS: [
//       {
//         replyByName: '李四',
//         replyTime: '2020/03/09 04:08:23',
//         content: '你好'
//       }
//     ]
//   },
//   {
//     commentByName: '914867718',
//     commentBy: 1,
//     commentTime: '2020/01/09 12:09:00',
//     content: '指定电话',
//     replyDTOS: []
//   }
// ]

@Component({
  components: { MessageInput }
})
export default class DocComment extends Vue {
  @Prop() data!: any

  @Ref() messageInput!: MessageInput

  pageData = new PageData(this.loader)

  get userId () {
    return this.$auth.principle?.user?.id
  }

  get loader () {
    return (params: PageQueryParams) => {
      return queryCommentsByDoc(this.data?.id, params).then(data => {
        (data?.content || []).forEach(v => Object.assign(v, { _expand: false }))
        return data
      })
    }
  }

  get disabled () {
    return this.pageData.loading || !this.pageData.hasMore
  }

  canReplyComment (row: any) {
    return true
  }

  canDelComment (row: any) {
    return row.commentBy === this.userId
  }

  canReplyReply (row: any) {
    return row.replyBy !== this.userId
  }

  canDelReply (row: any) {
    return row.replyBy === this.userId
  }

  sendFn (context: any, text: string): Promise<any> {
    const { type, comment, reply } = context
    if (type === 'comment') {
      return createComment({ docId: this.data?.id, content: text }).then(data => {
        if (data) this.pageData.rows.splice(0, 0, Object.assign(data, { _expand: false }))
      })
    } else {
      return createReply({ commentId: comment.id, content: text, repliedBy: reply?.replyBy }).then(data => {
        if (data) comment.replyDTOS.splice(0, 0, data)
      })
    }
  }

  onDelComment (row: any, i: number) {
    this.$confirm('确认删除该条评论, 删除后不可恢复。', '删除评论', {
      confirmButtonText: '删 除',
      cancelButtonText: '取 消',
      confirmButtonClass: 'el-button--danger',
      type: 'error'
    }).then(() => {
      deleteComment(row.id).then(() => {
        this.pageData.rows.splice(i, 1)
        this.$message.success('已删除评论')
      })
    }).catch(() => {
      // ignore
    })
  }

  onDelReply (row: any, item: any, i: number) {
    this.$confirm('确认删除该条恢复, 删除后不可恢复。', '删除回复', {
      confirmButtonText: '删 除',
      cancelButtonText: '取 消',
      confirmButtonClass: 'el-button--danger',
      type: 'error'
    }).then(() => {
      deleteReply(row.id).then(() => {
        row.replyDTOS.splice(i, 1)
        this.$message.success('已删除回复')
      })
    }).catch(() => {
      // ignore
    })
  }

  onReplyComment (comment: any) {
    const ctx = {
      type: 'reply',
      comment
    }
    this.messageInput.open(ctx)
  }

  onReplyReply (comment: any, reply: any) {
    const ctx = {
      type: 'reply',
      comment,
      reply
    }
    this.messageInput.open(ctx)
  }

  onLoad () {
    this.pageData.loadNext()
  }

  created () {
    this.pageData.load({ prop: 'commentTime', order: 'desc' })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  box-sizing: border-box;
  height: calc(100vh - 48px - 40px - 56px);
  display: flex;
  flex-direction: column;
  padding: 0 0 0 8px;
  font-size: 12px;
}

.body {
  flex:  1 1 auto;
  overflow: auto;
  // padding-right: 8px;
}

.groupList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listWrap {
  margin: 0 0 0 36px;
  padding: 8px 4px 8px 8px;
  background-color: $bg-body-color;
  border-radius: 2px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.groupItem {
  padding: 12px 0;
}

.groupContent {
  display: flex;
  // padding: 0 12px;
}

.avatar {
  flex: 0 0 auto;
  width: 36px;
}

.content {
  flex: 1 1 auto;
}

.title {
  line-height: 28px;
}

.text {
  flex: 1 1 auto;
}

.textContent {
  margin-top: 2px;
}

.time {
  flex: 0 0 auto;
  width: 48px;
  font-size: 12px;
  color: $text-secondary-color;
}

.limitText {
  display: inline-block;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.description {
  color: $text-secondary-color;
  font-size: 12px;
  margin-top: 4px;
}

.item {
  margin-bottom: 16px;
}

.footer {
  flex: 0 0 auto;
  padding: 12px 8px 0 8px;
}
</style>
